<template>
    <div>
        <el-card style="max-width:100%">
            <template #header>
                <div class="card-header flex justify-between">
                    <span class="title-left">{{ props.titleLeft }}</span>
                    <div>
                        <el-tag type="danger" effect="plain" class="title-right">
                            {{ props.titleRight }}
                        </el-tag>
                    </div>
                </div>
            </template>
            <ul class="flex justify-around">
                <li class="bg-gray-100 cursor-pointer" v-for="(item, index) in props.itemList" :key="index">
                    <el-card class="flex flex-col justify-center items-center border-0"
                        :style="{ backgroundColor: '#f3f4f6', }" style="width: 100%; height: 100%;" shadow="hover">
                        <div class="flex justify-center items-center">{{ item.value }}</div>
                        <div class="text-gray-500 mt-1">{{ item.label }}</div>
                    </el-card>
                </li>
            </ul>
        </el-card>
    </div>
</template>
<script setup>
const props = defineProps({
    itemList: Object,
    titleLeft: String,
    titleRight: String
})



</script>
<style scoped lang='scss'>
ul>li {
    width: 22%;
    height: 100px;
    @apply bg-gray-100;
}
</style>
